<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<!--引用百度地图API-->
<style type="text/css">
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div id="web">
				<embed src="media/澶滅殑閽㈢惔鏇蹭簲 - 杞婚煶涔愮綉.mp3" hidden="true" autostart="true" loop="true"></embed>
			<div class="section page1">
				<div class="bigbg">
				<div class="bg1"></div>
				<div class="bg2"></div>	
				<div class="bg3"></div>
				<div class="bg4"></div>
				<!--<div class="bg5"></div>-->
			</div>
			<div class="onepicture">
				<img src="img/13.png"  class="img1"/>
			</div>
			<div class="black"></div>
			<div class="yellowpic">
				<img src="img/9.png" />
			</div>
			<div class="ball">
				<img src="img/12.png" />
			</div>
			<div class="twopic">
				<img src="img/15.png" />
			</div>
			<div class="renxiang">
				<img src="img/7.png" />
			</div>
			<div class="top-pic">
				<img src="img/16.png" />
			</div>
			<div class="wz">
				<ul>
					<li class="wz1">易企秀招聘</li>
					<li class="wz2">程序猿</li>
					<li class="wz2">文案</li>
					<li class="wz2">运营</li>
					<li class="wz2">设计师</li>
				</ul>
			</div>
	
			
			</div>
			
			<div class="section page2">
				
				<div class="yuan1">
					<img src="img/21.png" />
				</div>
				<div class="yuan2">
					<img src="img/22.png" />
				</div>
				
				
				<div class="text3">
					
					<div class="yuan3"></div>
					<div class="yuan4"></div>
					<div class="text4">
					<ul>
						<li>5年以上工作经验</li>
						<li>有带团队经验</li>
						<li>主导设计至少一款上线并经过版本迭代的移动端产品</li>
						<li>熟练使用 Photoshop</li>
						<li class="li1">illustrator</li>
						<li class="li1">AE</li>
						<li class="li1">Axure</li>	
						<li class="li1">等设计软件</li>	
					</ul>
					</div>
				</div>
				<div class="text5">
					<p class="p1">设计师</p>
					<p class="p2">设计师</p>
					<p class="p3">越压力，越自由</p>
					<p class="p4">越压力，越自由</p>
					<p class="p5">脑洞大有创意有想法</p>
					<p class="p6">脑洞大有创意有想法</p>
				</div>
				
			</div>
			<div class="section page3">
					<div class="onefencing">
						<img src="img/27.png" />
					</div>
				<div class="twofencing">
						<img src="img/25.png" />
					</div>
				<div class="fencing-yellow">	
				</div>	
				<div class="fencing-blue"></div>
				<div class="fencing3">
					<img src="img/28.png" />
				</div>
				<div class="fencing4">
					<img src="img/23.png" />
				</div>
				
				<div class="fencing-text">
					<div class="fencing5">
						<img src="img/30.png" />
					</div>
					<div class="fencing6">
					<img src="img/29.png" />
				    </div>
				    <div class="fencing7">
					<img src="img/29.png" />
				    </div>
				    <div class="fencing8">
					<img src="img/29.png" />
				    </div>
					<div class="fencing-txt">
						<ul>
							<li>.3~5年互联网相关的运营经验，善于整合利用各种资源，熟悉2B市场优先；</li>
							<li>.有ICP/ISP/共有云行业经验优先，在开源社区活跃并有良好人际关系者优先；</li>
							<li>.具有较强的活动分析、营销、策划、推广能力；</li>
							<li>.对数据敏感，善于从数据中挖掘需求。</li>
							
						</ul>
					</div>
				</div>
				<div class="fencing-text1">
					<p class="fencing-p1">运营</p>
					<p class="fencing-p2">要精准也要速度</p>
				</div>
				
			</div>
			<div class="section page4">
				<div class="gy1">
					<div class="gymnastics">
						<img src="img/34.png" />
					</div>
					
				    <div class="gymnastics3">
						<img src="img/32.png" />
					</div>
				</div>	
					<div class="gy-bg1"></div>
					<div class="gy-bg2"></div>
					<div class="gy-bg3"></div>
					<div class="gymnastics1">
						<img src="img/35.png" />
					</div>
					<div class="gymnastics2">
						<img src="img/33.png" />
					</div>
					<div class="gy-text">
						<ul>
							<li>熟练PHP+MySQL、Python或.net其中一种编程，能独立开发网站</li>
							<li>熟悉XML、XSL、JavaScript、 Ajax、HTML5、DIV＋CSS、jQuery</li>
							<li>· 熟悉进行跨平台的Socket编程,熟悉 TCP/IP协议，熟悉多线程编程； </li>  
							<li>逻辑清晰、责任感强、学习能力强、团队协作能力强、有创业精神。 </li>           
						</ul>
					</div>
					<div class="gy-text1">
						<p class="gy-t1">后端开发工程师</p>
						<p class="gy-t2">变的是花样，不变的是稳定</p>
					</div>
			</div>
			<div class="section page5">
					<div class="shooting">
						<img src="img/36.png" />
					</div>
					<div class="shooting1">
						<img src="img/37.png" />
					</div>
					<div class="shooting2">
						<img src="img/39.png" />
					</div>
					<div class="shooting3">
						<img src="img/38.png" />
					</div>
					<div class="shooting4">
						<img src="img/41.png" />
					</div>
					<div class="shooting5">
						<img src="img/40.png" />
					</div>
				<div class="shooting6">
						<img src="img/44.png" />
					</div>
					<div class="shooting7">
						<img src="img/43.png" />
					</div>
					<div class="shooting8">
						<img src="img/42.png" />
					</div>
					<div class="shooting9">
						<div class="shooting10">
					</div>
					</div>
					<div class="shooting-text">
						<ul>
							<li>.深入理解W3C标准与ES规范熟悉Web语义化；</li>
							<li>.需要有Html5与CSS3开发经验；</li>
							<li>.了解ES6规范；</li>
							<li>.熟练使用各种调试抓包工具，能独立分析、解决和归纳问题；</li>
						</ul>
					</div>
					<div class="shooting-text1">
						<p class="shooting-textp1">前端工程师</p>
						<p class="shooting-textp2">敢为天下先</p>
					</div>
			</div>
			<div class="section page6">
					<div class="page6-one">
						<img src="img/31.png" />
					</div>
					<div class="page6-top">
						<p>我们的福利</p>
					</div>
					<div class="page6-text">
						<ul>
							<li>.一年十三薪</li>
							<li>.餐饮补贴</li>
							<li>.交通补贴</li>
							<li>.话费补贴</li>
						</ul>
					</div>
				
			</div>
			<div class="section page7">
					<div class="page7-text">
						<div class="page7-left">
							<p>求职热线</p>
						</div>
						<p class="page7-p">北京市紫金数码园4号楼201</p>
					</div>
			        <div class="page7-map">
			        	 <div style="width: 398px;height: 224px;border:#ccc solid 1px;" id="dituContent"></div>
			        </div>	
			</div>
			<div class="section page8">
				<div class="page8-bg">
					<img src="img/6.jpg"/>
				</div>
				<div class="page8-img1">
					<img src="img/4.png" />
				</div>
				<div class="page8-img2">
					<img src="img/5.gif" />
				</div>
				<div class="page8-img3">
					<img src="img/3.jpg" />
				</div>
				<div class="te">
					<p>精彩场景</p>
					<p>不容错过</p>
				</div>
			</div>
		</div>
		
		
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/jquery.fullPage.min.js"></script>
		
		<script>
			//jq写法，$("")获取页面元素，双引号里面写css3选择器
			$("#web").fullpage({
				//对象写法
				//属性：值（数字、字符串、对象、数组、布尔型、null/underfined/含数）；
				sectionsColor:["gainsboro","rgba(255,125,240,0.5)","glod"],
				//导航小点；
				navigation:false,
				
				//触摸的敏感度，越大越难滑
				tochSensitivity:50,
				//当滑到每一页结束之后触发的函数
				//可以在触发时给每个页面添加激活类（active)
				//参数：锚点序号，页面的序号
//				afterLoad:function(anchorIndex,index){
//					console.log("滑动结束了");
//					console.log(anchorIndex,index);
//					//虽然此处的index是从1开始，但是js的序号都是从0开始的
//					//如果index等于1时，就执行。。。
//					if(index == 1){
//						//先找到.section的元素，再从里面找第0个,添加类名
//						$(".section").eq(0).addClass("active haha")
//					}
//					if(index == 2){
//						//先找到.section的元素，再从里面找第0个,添加类名
//						$(".section").eq(1).addClass("active")
//					}
//					
//				}
//				
				afterLoad:function(anchorIndex,index){
					
					if(index==4){
						$(".gymnastics3").addClass("gy01");
					}
					if(index==5){
						$(".gymnastics3").removeClass("gy01");
					}
				}
		});
			
		</script>
		
		<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.569307,31.238065);//定义一个中心点坐标
        map.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
    
    //标注点数组
    var markerArr = [{title:"我的标记",content:"我的备注",point:"121.567438|31.235055",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
		 ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
			var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
			var iw = createInfoWindow(i);
			var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
			marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
			
			(function(){
				var index = i;
				var _iw = createInfoWindow(i);
				var _marker = marker;
				_marker.addEventListener("click",function(){
				    this.openInfoWindow(_iw);
			    });
			    _iw.addEventListener("open",function(){
				    _marker.getLabel().hide();
			    })
			    _iw.addEventListener("close",function(){
				    _marker.getLabel().show();
			    })
				label.addEventListener("click",function(){
				    _marker.openInfoWindow(_iw);
			    })
				if(!!json.isOpen){
					label.hide();
					_marker.openInfoWindow(_iw);
				}
			})()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    
    initMap();//创建和初始化地图
</script>
	</body>
</html>
